<script setup>
// 引入three
import * as THREE from 'three'
// 引入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
// 引入gltf解析器（压缩过的模型要使用解析器！！！）
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
import gsap from 'gsap'
import { useCounterStore } from '@/stores'
const data = useCounterStore()


// 初始化三维场景
const scene = new THREE.Scene()


// 初始化相机
const camera = new THREE.PerspectiveCamera(
  125,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
// 设置相机位置
camera.position.set(52.41315076300808, 208.63761921159926, 397.0907198496605)


// 初始化渲染器
const render = new THREE.WebGLRenderer({
  // 设置抗锯齿
  antialias: true
})
// 设置渲染器大小
render.setSize(window.innerWidth, window.innerHeight)
// 将渲染器放置到body页面中
document.body.appendChild(render.domElement)


// 初始化轨道控制器
const controls = new OrbitControls(camera, render.domElement)
// 开启阻尼效果
controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05
// 设置目标位置
controls.target.set(-34.6680212333933, 117.20589994472482, -17.764608879853036)
// 设置控制器移动范围
controls.minDistance = 350
controls.maxDistance = 400
// 限制垂直旋转角度
controls.minPolarAngle = 0
controls.maxPolarAngle = Math.PI / 2
// 禁止右键平移
controls.enablePan = false


// 创建纹理场景背景
const textureLoader = new THREE.TextureLoader()
// 加载纹理
let texture = textureLoader.load('./textures/img/backimg.png', () => {
  // 纹理要开启色彩空间(否则颜色会有偏差)
  texture.colorSpace = THREE.SRGBColorSpace
  scene.background = texture
})

// 创建GLTF加载器对象
const gltfLoader = new GLTFLoader()
// 创建解析器对象
const dracoLoader = new DRACOLoader()

// 解析器位置
dracoLoader.setDecoderPath('./draco/')
// 给加载器指定解析器
gltfLoader.setDRACOLoader(dracoLoader)
// 注意！！：默认是在public中找模型，写路径的时候不能再写public
gltfLoader.load('./textures/models/model1.glb', (gltf) => {
  // console.log(gltf)
  const model = gltf.scene
  scene.add(model)
  // 模型加载完成隐藏loading页面
  data.loading = false
  // 模型加载完毕显示二维面板
  data.animate = true
})

gsap.to(camera, {
  fov: 70, // 缩小视角到 30
  duration: 2,
  ease: 'power2.inOut',
  onUpdate: () => {
    camera.updateProjectionMatrix()
  }
})

// 添加平行光
const ligth1 = new THREE.DirectionalLight(0xffffff, 1)
ligth1.position.set(0, 100, 150)
const ligth2 = new THREE.DirectionalLight(0xffffff, 1)
ligth2.position.set(0, 100, -150)
const ligth3 = new THREE.DirectionalLight(0xffffff, 1)
ligth3.position.set(-150, 100, 0)
const ligth4 = new THREE.DirectionalLight(0xffffff, 1)
ligth4.position.set(150, 100, 0)
const ligth5 = new THREE.DirectionalLight(0xffffff, 1)
ligth5.position.set(0, 200, 0)
scene.add(ligth1, ligth2, ligth3, ligth4, ligth5)


// 设置画布自适应屏幕大小
window.addEventListener('resize', () => {
  // 重置渲染器输出画布canvas尺寸
  render.setSize(window.innerWidth, window.innerHeight)
  // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
  camera.updateProjectionMatrix()
})


// 创建渲染函数
const animate = () => {
  // 请求动画帧
  requestAnimationFrame(animate)
  // 渲染
  render.render(scene, camera)
  controls.update()
}
// 调用渲染函数
animate()



// AxesHelper：辅助观察的坐标系[可选] AxesHelper中参数为坐标线长度
// const axesHelper = new THREE.AxesHelper(200)
//将坐标轴添加到创建的三维场景中
// scene.add(axesHelper)

// 获取相机位置+目标位置（保留备用）
// const cameraFun = () => {
//   console.log(camera.position.x, camera.position.y, camera.position.z)
//   console.log(controls.target.x, controls.target.y, controls.target.z)
// }
</script>

<template>
  <div>
    <!-- <button @click="cameraFun">获取坐标</button> -->
  </div>
</template>

<style lang="scss" scoped>
button {
  position: fixed;
  left: vw(578px);
  top: vh(200px);
  width: vw(147px);
  height: vh(49px);
  background: url('./textures/img/button.png') no-repeat center/100% 100%;
  z-index: 3;
  color: #fff;
  border: none;
  font-size: vw(18px);
  cursor: pointer;
}
</style>